<template>
  <div class="allBox">
    <button @click="checkFire">点我着火</button>
    <button @click="clearFire">点我清除着火</button>
  </div>
</template>
<script setup>
import { fire } from '@/views/togranary/settings/model'
import { onMounted, shallowReactive } from '@vue/runtime-core'

const fireMain = shallowReactive({
  // 火焰class类
  haveFire: null,
  // 可以着火的粮仓name
  meshName: [],
  // 已经着火的粮仓name
  isFire: [],
  // 火焰实例
  fire: null,
  // 声明火焰实例
  Getfire: null,
  // 需要灭火的模型
  putOut: []
})

// 获取火焰实例
const getFire = async (index) => {
  // 引入构造函数 fire
  fireMain.haveFire = await fire
  const { haveFire } = fireMain
  fireMain.meshName = haveFire.meshName
}

// 着火方法
const openFire = (index) => {
  const { haveFire, putOut, Getfire } = fireMain
  fireMain.Getfire = new haveFire.Getfire(index)
  // 获取火焰实例
  fireMain.fire = fireMain.Getfire.granaryFlame()
  // 储存灭火实例
  putOut.push(fireMain.fire)
  fireMain.Getfire.getFire(fireMain.fire)
}

// 灭火方法
const clearFire = (index) => {
  const { fire, Getfire, putOut } = fireMain
  putOut.forEach(e => {
    Getfire.stopFire(e)
  })
}

const checkFire = () => {
  const number = Math.trunc(Math.random() * fireMain.meshName.length)
  const name = fireMain.meshName[number]
  fireMain.isFire.push(name)
  openFire(name)
}

// const clearFire = () => {
//   const { isFire } = fireMain
//   isFire.forEach(element => {
//     closeFire(element)
//   })
// }

onMounted(() => {
  getFire()
})

</script>
<script>
export default {
  name: 'ContRol'
}
</script>
<style lang="scss" scoped>
.allBox {
  width: 300px;
  height: 200px;
  background: rgb(255, 255, 255, 0.4);
}
</style>
